<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            flex-direction: column;
            min-height: 100vh;
            align-items: center;
            background-color: #0e1538;
        }

        a {
            display: flex;
            background-color: #000;
            padding: var(--p) 60px;
            margin: 40px;
            font-size: 18px;
            position: relative;
            overflow: hidden;
            transition: 0.5s;
            /*
            说明:
            1. a标签的该属性默认值为overline表示要有一个下横线, 设置为none表示普通文本.
            */
            text-decoration: none;
            border-radius: 10px;
        }

        a:hover {
            /*
            说明:
            1. 属性格式为: box-shadow: offset-x offset-y blur spread color inset;
            X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
            offset-x：必需，取值正负都可。offset-x水平阴影的位置。
            offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
            blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
            spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
            color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
            inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。
            */
            box-shadow: 0 0 10px var(--clr),
            0 0 30px var(--clr),
            0 0 60px var(--clr),
            0 0 100px var(--clr);
            background: var(--clr);
        }

        /*
        说明:
        1. 这个选择器是用来获取焦点后改变a:after元素的背景色的.
        */
        a:hover:after {
            background: var(--clr);
        }

        a:before {
            content: '';
            position: absolute;
            width: 40px;
            height: 400%;
            background: var(--clr);
            top: -150%;
            animation: ans 1s infinite;
            /*
            说明:
            1. 该属性用于控制动画延迟.
            */
            animation-delay: calc(0.53s * var(--i));
            border-radius: 10px;
        }

        a:after {
            content: '';
            /*
            说明:
            1. 该属性相当于是top, left等绝对定位的另一种写法, 其他写法如下:
            inset: 0;  等同于 `top: 0; right: 0; bottom: 0; left: 0;`
            inset: 1em 2em; 等同于 `top: 1em; right: 2em; bottom: 1em; left: 2em;`
            inset: 1em 2em 3em; 等同于 `top: 1em; right: 2em; bottom: 3em; left: 2em;`
            inset: 1em 2em 3em 4em; 等同于 `top: 1em; right: 2em; bottom: 3em; left: 4em;`
            */
            inset: 4px;
            background: #0e1538;
            position: absolute;
            border-radius: 7px;
        }

        @keyframes ans {
            0% {
                transform: rotate(0deg);
            }
            0% {
                transform: rotate(360deg);
            }
        }

        a span {
            color: #fff;
            position: relative;
            z-index: 1;
            /*
            说明: 该属性控制字间距
            */
            letter-spacing: 4px;
        }

    </style>

</head>
<body>
<a href="#" style="--clr: #ff22bb; --i :0; --p: 20px;">
    <span>按钮1</span>
</a>
<a href="#" style="--clr: #00ccff;  --i :1; --p: 40px;">
    <span>按钮2</span>
</a>
<a href="#" style="--clr: #22e622;  --i :2; --p: 60px;">
    <span>按钮3</span>
</a>
</body>
</html>